
<template>
<div class="top">
    <top0></top0>
</div>
  <div class="container">
    <!-- Header -->
     <div style="display: flex;background-color:#f0f4f7 ;">
        <img src="../../../public/logo2.png" alt="未来蜂 Logo" class="logo" style=""/>
      <div class="header" style="display: flex; flex: 1; justify-content: center; align-items: center; flex-direction: column; margin-right:11%;">
        <h1 style="margin-bottom:5px">未来蜂</h1>
        <p >智慧社区，让生活更美好</p>
      </div>
      </div>
    <!-- Main Content -->
    <div class="main-content">
        <div style="display: flex;justify-content: center; align-items: center;flex-direction: column;">
            <h2>关于我们</h2>
       
              <p style="margin-top:20px"> 未来蜂致力于通过整合现代科技，为社区居民提供更便捷、更安全、更舒适的生活方式。我们通过深入了解社区居民的需求，设计了一系列功能来满足他们的日常生活和管理需求。</p>
        </div>
      <div class="features">
        <div class="feature-item" >
          <h3 >商品管理</h3>
          <p>社区居民可通过本平台轻松订购各种生活所需品，涵盖商品管理、订单管理、支付管理等功能。</p>
          <el-image :src="'../../../public/images/Logo/FBThree.jpg'"></el-image>
        </div>
        <div class="feature-item">
          <h3>物业管理</h3>
          <p>通过物业管理平台，居民可方便地管理自己的车位，避免因停车位紧张而带来的不便和烦恼。</p>
          <el-image  :src="'../../../public/images/Logo/FBThree.jpg'"></el-image>
        </div>
        <div class="feature-item">
          <h3>访客登记</h3>
          <p>通过访客登记系统，居民可以提前登记访客信息，提高社区的安全性。</p>
          <el-image  :src="'../../../public/images/Logo/FBFk.jpg'"></el-image>
        </div>
        <div class="feature-item">
          <h3>物业费缴纳</h3>
          <p>依托物业费线上缴费系统，居民可方便快捷地完成物业费的缴纳，无需排队等候。</p>
          <el-image  :src="'../../../public/images/Logo/FBThree.jpg'"></el-image>
        </div>
        <div class="feature-item">
          <h3>报修服务</h3>
          <p>居民可通过平台随时随地提交报修需求，管理团队将及时响应并处理。</p>
          <el-image  :src="'../../../public/images/Logo/FBThree.jpg'"></el-image>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="bottom" style="position: fixed;bottom: 0;left: 0;width: 100%;">
        <footer0></footer0>
    </div>
  </div>
</template>

<script setup>
import {ref } from 'vue'

import top0 from '@/views/top-zjm/top.vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  text-align: center;
  background-color: #f0f4f7;
  padding: 20px;
}

.logo {
  height: 48px;
  margin-top:36px;
  margin-left:18px;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.features {
    margin-top:8%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-item {
  flex: 1;
  min-width: 200px;
  height:300px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  display: flex;
   align-items: center;
   flex-direction: column;
   p{
    margin-top:30px;
   }
}

.footer {
  background-color: #f0f4f7;
  padding: 10px;
  text-align: center;
}

</style>
